<template>
  <div class="w-container" :class="{ shadow: !showSearch }">
    <header class="main">
      <ul class="list">
        <li
          v-for="(item, index) in list"
          :key="index"
          class="item"
          :class="{ 'is-checked': index === currentIndex }"
          @click="itemClick(index)"
        >
          {{ item.name }}
        </li>
      </ul>
      <SearchBox width="20.5rem" v-if="showSearch" />
    </header>
  </div>
</template>

<script>
import SearchBox from "@/components/header/SearchBox";
export default {
  name: "SearchHiddenHeader",
  props: {
    showSearch: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      list: [
        {
          name: "综合",
        },
        {
          name: "用户",
        },
        {
          name: "话题",
        },
        {
          name: "专栏",
        },
        {
          name: "Live",
        },
        {
          name: "盐选专栏",
        },
        {
          name: "电子书",
          isChecked: false,
        },
        {
          name: "圈子",
        },
      ],
      currentIndex: 0,
    };
  },
  components: {
    SearchBox,
  },
  methods: {
    itemClick(index) {
      this.currentIndex = index;
    },
  },
};
</script>

<style lang="scss" scoped>
.w-container {
  width: 100%;
  height: 6rem;
  background-color: #fff;

  .main {
    display: flex;
    justify-content: space-between;
    width: 100rem;
    height: 6rem;
    margin: 0 auto;
    .list {
      display: flex;
      height: 100%;
      .item {
        position: relative;
        height: 100%;
        line-height: 6rem;
        padding: 0 1.8rem;
        cursor: pointer;
      }
      .is-checked::after {
        position: absolute;
        content: "";
        right: 0;
        bottom: -0.1rem;
        left: 0;
        height: 0.3rem;
        background: #0084ff;
      }
    }
  }
}
.shadow {
  box-shadow: 0 0.1rem 0.3rem rgba(18, 18, 18, 0.1);
}
</style>
